<template>
    <div class="flexC colorF" style="width:100%;height:100%;">
        <div class="flex JustifyContentSA" style="width:100%;height:2.25rem;">
            <p class="flex1 riskModal-title textC font_s26">识险</p>
            <p class="flex1 riskModal-title textC font_s26">排险</p>
            <p class="flex1 riskModal-title textC font_s26">评险</p>
        </div>
        <div class="flex" style="width:100%;height:100%;">
            <div class="flex1">
                <div style="position:absolute;top:20%;left:7%;z-index:1;"><img src="../../../assets/img/comprehensive/left/48.png" alt=""></div>
                <div class="flexC colorF font_s18" style="position:relative;z-index:99;">
                    <div class="riskModal-leftItem" style="margin-top: 2.25rem;">
                        <p class="leftItem-title">现场检查</p>
                        <p class="leftItem-content">未建立业务、安全档案、未对电器设备进行维护保养。无禁烟标识等</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">舆情预警</p>
                        <p class="leftItem-content">侵犯群众合法权益等</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">六个双信息</p>
                        <p class="leftItem-content">未配备足够灭火器，有检查记录卡，每月定期检查。</p>
                        <p class="leftItem-content">未持有合法有效的《工商营业执照》等</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">投诉举报</p>
                        <p class="leftItem-content">未按国家有关标准和规定开展殡葬服务等</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">殡葬单位探头人流技术系统等设备</p>
                        <p class="leftItem-content">未禁止在公墓内燃放烟花、爆竹等</p>
                    </div>
                </div>
            </div>
            <div class="flex2 flexC">
                <div class="flex3 flexC JustifyContentSA" style="margin-top:2.125rem;">
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg01">高风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect" style="color: #EE6B6A;">
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>1、</p><p style="width:90%;">未按照国家有关标准和规定开展殡葬服务</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>2、</p><p style="width:90%;">未保持安全出口、疏散通道、消防车通道畅通，应急照明，安全疏散标志标识缺失，未保证常闭式消防门处于关</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/30.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex">
                            <p class="bgImg_rightSmall01">应急排险</p>
                            <div class="bgImg_rightBig01 flexC JustifyContentSA">
                                <p style="width:80%;">出具整改通知必要时启动行政处罚流程</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg02">中风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect" style="color: #75F1D0;">
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>1、</p><p style="width:90%;">未开展安全隐患排查和薄弱环节的自查自纠</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>2、</p><p style="width:90%;">未设立清明（冬至）祭扫高峰接待工作领导小组,制定接待工作方案</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>3、</p><p style="width:90%;">未组织开展至少每月防火检查，每日一次防火巡查等</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/30.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex">
                            <p class="bgImg_rightSmall02">专项整治</p>
                            <div class="bgImg_rightBig02 flexC JustifyContentSA">
                                <p style="width:80%;">访谈约谈</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg03">低风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect" style="color: #66BEFF;">
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>1、</p><p style="width:90%;">未每年至少开展一次员工安全教育培训活动</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p>2、</p><p style="width:90%;">园区内和寄存室未设置承载力标识等</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/30.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex">
                            <p class="bgImg_rightSmall03">跟踪查证</p>
                            <div class="bgImg_rightBig03 flexC JustifyContentSA">
                                <p style="width:80%;">网络告知、口头告知</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex2 flexC AlignItemsC JustifyContentC">
                    <div class="bgImg_rightBox">
                        <p class="colorF textC" style="line-height:2.585rem;">风险内容评估模型</p>
                        <p class="flex textC bgImg_boxTitle" style="margin: 0.525rem auto 0.225rem auto;">
                            <span class="flex1">类型</span>
                            <span class="flex1">风险内容</span>
                            <span class="flex1">监管方式</span>
                            <span class="flex1">检查频次</span>
                        </p>
                        <div class="flex textC JustifyContentSA AlignItemsC" style="padding: 0 4.625rem;">
                            <p class="bgImg_boxContent01">殡葬行业风险</p>
                            <p><img src="../../../assets/img/comprehensive/left/45.png" alt=""></p>
                            <p class="flexC">
                                <span class="bgImg_boxContent02 bgImg_boxContent02_1">运营管理</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_2">消防安全</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_3">设施设备</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_4">烟花爆竹管控</span>
                            </p>
                            <p><img src="../../../assets/img/comprehensive/left/46.png" alt=""></p>
                            <p class="bgImg_boxContent01">风险监管</p>
                            <p><img src="../../../assets/img/comprehensive/left/47.png" alt=""></p>
                            <p class="bgImg_boxContent03">至少一年一次</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'RiskModal',
  data () {
    return {}
  }
}
</script>
<style scoped>
.riskModal-title {
    background: url(../../../assets/img/comprehensive/left/15.png) no-repeat center;
    background-size: 70% 100%;
}
.riskModal-leftItem {
    margin-left: 3.725rem;
    margin-bottom: 1.225rem;
}
.leftItem-title {
    background: url(../../../assets/img/comprehensive/left/28.png) no-repeat;
    background-size: 100% 100%;
    width: 10.625rem;
    height: 3.225rem;
    line-height: 3.225rem;
    padding-left: 2.625rem;
}
.leftItem-content {
    background: url(../../../assets/img/comprehensive/left/29.png) no-repeat center;
    background-size: 100% 100%;
    width: 22.285rem;
    line-height: 1.275rem;
    padding:1.225rem 2.225rem;
    margin-left: 0.875rem;
}
.bgImg-circle {
    font-size: 26px;
    text-align: center;
    width:6.25rem;
    height: 6.25rem;
    line-height:6.25rem;
}
.bgImg01 {
    background: url(../../../assets/img/comprehensive/left/20.png) no-repeat center;
    background-size: 100% 100%;
    color: #EE6B6A;
}
.bgImg02 {
    background: url(../../../assets/img/comprehensive/left/21.png) no-repeat center;
    background-size: 100% 100%;
    color: #4FA791;
}
.bgImg03 {
    background: url(../../../assets/img/comprehensive/left/22.png) no-repeat center;
    background-size: 100% 100%;
    color: #3E92D4;
}
.bgImg-rect {
    background: url(../../../assets/img/comprehensive/left/19.png) no-repeat center;
    background-size: 100% 100%;
    padding:1rem 1rem;
    width: 36%;
}
.bgImg_rightSmall01 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #EE6B6A;
    background: url(../../../assets/img/comprehensive/left/31.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig01 {
    width:23.625rem;
    font-size: 20px;
    padding-left: 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/32.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightSmall02 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #4FA791;
    background: url(../../../assets/img/comprehensive/left/33.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig02 {
    width:23.625rem;
    font-size: 20px;
    padding-left: 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/34.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightSmall03 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #3E92D4;
    background: url(../../../assets/img/comprehensive/left/35.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig03 {
    width:23.625rem;
    font-size: 20px;
    padding-left: 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/36.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBox {
    width: 90%;
    height: 90%;
    background: url(../../../assets/img/comprehensive/left/23.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxTitle {
    background: url(../../../assets/img/comprehensive/left/38.png) no-repeat center;
    background-size: 100% 100%;
    line-height: 2.125rem;
    width: 92%;
    margin:0 auto;
}
.bgImg_boxContent01 {
    background: url(../../../assets/img/comprehensive/left/39.png) no-repeat center;
    background-size: 100% 100%;
    width: 16%;
    height: 3.325rem;
    line-height: 3.325rem;
}
.bgImg_boxContent02 {
    width: 12.825rem;
    height: 2.425rem;
    line-height: 2.425rem;
    margin:0.185rem 0;
}
.bgImg_boxContent02_1 {
    background: url(../../../assets/img/comprehensive/left/40.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_2 {
    background: url(../../../assets/img/comprehensive/left/41.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_3 {
    background: url(../../../assets/img/comprehensive/left/42.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_4 {
    background: url(../../../assets/img/comprehensive/left/43.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent03 {
    background: url(../../../assets/img/comprehensive/left/44.png) no-repeat center;
    background-size: 100% 100%;
    width: 9.625rem;
    height: 9.625rem;
    line-height: 9.625rem;
}
</style>
